<template>
  <div style="margin-top: -10px; margin-bottom: 10px">
    <!-- 搜索区域 -->
    <el-input
      v-model="search_name"
      placeholder="姓名搜索"
      style="width: 100px; margin-right: 10px"
    />
    <el-input
      v-model="search_sex"
      placeholder="性别搜索"
      style="width: 100px; margin-right: 10px"
    />
    <el-input
      v-model="search_branch"
      placeholder="部门搜索"
      style="width: 100px; margin-right: 10px"
    />
    <el-input
      v-model="search_permission"
      placeholder="权限搜索"
      style="width: 100px; margin-right: 10px"
    />
    <el-input
      v-model="search_Tel"
      placeholder="手机号搜索"
      style="width: 100px; margin-right: 10px"
    />
  </div>

  <el-table
    ref="multipleTableRef"
    :data="filterTableData"
    row-key="id"
    border
    :row-class-name="tableRowClassName"
    style="width: 100%"
    max-height="400"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column fixed prop="name" label="姓名" width="180" sortable />
    <el-table-column prop="sex" label="性别" width="180" sortable />
    <el-table-column prop="branch" label="部门" width="180" sortable />
    <el-table-column prop="permission" label="权限" width="180" sortable />
    <el-table-column prop="Tel" label="手机号码" sortable />
    <el-table-column prop="creatDate" label="创建时间" width="120" show-overflow-tooltip sortable />

    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.$index, scope.row)"
          >详情</el-button
        >
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button link size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'

const multipleTableRef = ref() //table表格实例
const multipleSelection = ref([]) //多选

// 所勾选行的信息数组
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(val)
}

const search_name = ref('')
const search_sex = ref('')
const search_branch = ref('')
const search_permission = ref('')
const search_Tel = ref('')
// 过滤后的表格数据（计算属性）
const filterTableData = computed(() =>
  tableData.filter((data) => {
    return (
      (!search_name.value || data.name.toLowerCase().includes(search_name.value.toLowerCase())) &&
      (!search_sex.value || data.sex.toLowerCase().includes(search_sex.value.toLowerCase())) &&
      (!search_branch.value ||
        data.branch.toLowerCase().includes(search_branch.value.toLowerCase())) &&
      (!search_permission.value ||
        data.permission.toLowerCase().includes(search_permission.value.toLowerCase())) &&
      (!search_Tel.value || data.Tel.toString().includes(search_Tel.value))
    )
  }),
)

// 点击详情的函数
const handleClick = (index, row) => {
  console.log(row)
}

// 编辑函数
const handleEdit = (index, row) => {
  console.log(index, row)
}
// 删除函数
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = [
  {
    id: 1,
    name: 'Tom',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2026-03-03',
  },
  {
    id: 2,
    name: 'bddf',
    sex: '男',
    branch: '电网部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2018-07-07',
  },
  {
    id: 3,
    name: 'gdnh',
    sex: '女',
    branch: '外呼部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2016-05-03',
  },
  {
    id: 4,
    name: 'ewed',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2024-05603',
  },
  {
    id: 5,
    name: 'yrrxza',
    sex: '女',
    branch: '营销部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2008-08-03',
  },
  {
    id: 6,
    name: 'Tom',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2026-03-03',
  },
  {
    id: 7,
    name: 'bddf',
    sex: '男',
    branch: '电网部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2018-07-07',
  },
  {
    id: 8,
    name: 'gdnh',
    sex: '女',
    branch: '外呼部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2016-05-03',
  },
  {
    id: 9,
    name: 'ewed',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2024-05603',
  },
  {
    id: 10,
    name: 'yrrxza',
    sex: '女',
    branch: '营销部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2008-08-03',
  },
  {
    id: 11,
    name: 'Tom',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2026-03-03',
  },
  {
    id: 12,
    name: 'bddf',
    sex: '男',
    branch: '电网部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2018-07-07',
  },
  {
    id: 13,
    name: 'gdnh',
    sex: '女',
    branch: '外呼部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2016-05-03',
  },
  {
    id: 14,
    name: 'ewed',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2024-05603',
  },
  {
    id: 15,
    name: 'yrrxza',
    sex: '女',
    branch: '营销部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2008-08-03',
  },
  {
    id: 16,
    name: 'Tom',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2026-03-03',
  },
  {
    id: 17,
    name: 'bddf',
    sex: '男',
    branch: '电网部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2018-07-07',
  },
  {
    id: 18,
    name: 'gdnh',
    sex: '女',
    branch: '外呼部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2016-05-03',
  },
  {
    id: 19,
    name: 'ewed',
    sex: '男',
    branch: '技术部',
    permission: '2',
    Tel: '12364851264',
    creatDate: '2024-05603',
  },
  {
    id: 20,
    name: 'yrrxza',
    sex: '女',
    branch: '营销部',
    permission: '3',
    Tel: '12364851264',
    creatDate: '2008-08-03',
  },
]
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
